<!-- 订单详情 -->
<template>
	
	<view style="position: fixed;left: 0;right: 0;bottom: 0;background-color: #fff;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding:10rpx 30rpx;padding-bottom: 50rpx;">
		<view style="font-size: 30rpx;color: #ff0000;margin-top: 16rpx;font-weight: bold;">
			￥<text style="font-size: 50rpx;">999</text>.99
		</view>
		
		<button type="submit" class="pay-btn">立即支付</button>
	</view>
	
	<view class="" style="background-color: #fff;padding: 20rpx;margin-top: 20rpx;">
		<view style="margin-left: 20rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
			<view class="">
				<image src="../../static/images/tu1.jpg" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;"></image>
			</view>
			<view style="margin-left: 20rpx;">
				<view style="font-size: 30rpx;">
					小程序昵称
				</view>
				<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
					作者：爱偷懒的猫
				</view>
				<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
					类型： 
					<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">小程序</text>
					<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">H5</text>
				</view>
				<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
					当前服务：
					<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">定制</text>
					<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">托管</text>
					<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">源码</text>
				</view>
				<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
					发布时间：2023-07-09
				</view>
				<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
					功能介绍：漓江书院小程序提供了便捷的报名参加活动和预约服务的功能。
				</view>
		
			</view>
		</view>
	</view>
	<view class="" style="background-color: #fff;padding: 30rpx;margin-top: 20rpx;font-size: 28rpx;">
		<view style="display: flex">
			<text style="flex: 1;">总价</text>
			<text style="flex: 1;text-align: right;color: #ff0000;">999.99</text>
		</view>
		<view style="display: flex;margin-top:10rpx">
			<text style="flex: 1;">数量</text>
			<text style="flex: 1;text-align: right;">1</text>
		</view>
		<view style="display: flex;margin-top:10rpx">
			<text style="flex: 1;">订单号</text>
			<text style="flex: 1;text-align: right;">1155528E25ADFADC241452</text>
		</view>
		<view style="display: flex;margin-top:10rpx">
			<text style="flex: 1;">订单时间</text>
			<text style="flex: 1;text-align: right;">2024-07-20</text>
		</view>
	</view>
	
	<view style="background-color: #fff;padding: 30rpx;margin-top: 20rpx;font-size: 28rpx;">
		<view style="display: flex;">
			<text style="flex: 1;">付款方式</text>
			<text style="flex: 1;text-align: right;">微信支付</text>
		</view>
		
		<view class="">
			<view style="display: flex;margin-top:30rpx;align-items: center;justify-content: space-between;">
				<image src="../../static/images/weixin.png" style="width: 50rpx;height: 50rpx;border-radius: 10rpx;"></image>
				<view style="text-align: right;display: flex;align-items: center;justify-content: flex-end;">
					<view style="margin-right: 16rpx;">微信支付</view>
					<fui-checkbox :checked="false"></fui-checkbox>
				</view>
			</view>
			
			<view style="display: flex;margin-top:15rpx;align-items: center;justify-content: space-between;">
				<image src="../../static/images/zhifubao.png" style="width: 50rpx;height: 50rpx;border-radius: 10rpx;"></image>
				<view style="text-align: right;display: flex;align-items: center;justify-content: flex-end;">
					<view style="margin-right: 16rpx;">支付宝支付</view>
					<fui-checkbox :checked="false"></fui-checkbox>
				</view>
			</view>
			
			<view style="display: flex;margin-top:15rpx;align-items: center;justify-content: space-between;">
				<image src="../../static/images/BankCard.png" style="width: 50rpx;height: 50rpx;border-radius: 10rpx;"></image>
				<view style="text-align: right;display: flex;align-items: center;justify-content: flex-end;">
					<view style="margin-right: 16rpx;">银行卡支付</view>
					<fui-checkbox :checked="false"></fui-checkbox>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	
	.pay-btn {
		margin: 0;
		width: 360rpx;
		height: 75rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		line-height: 75rpx;
		background-color: #005dff;
		color: #fff;
		&::after {
			border: none;
		}
	}
</style>